<template>
	<view>
		<view class="mybutm">
			<view @tap="voice = !voice" class="iconfont addleft" :class="!voice ? 'icon-jianpan' : 'icon-yuyin'"></view>
			<view class="addcenter">
				<view v-if="voice">
						<input class="textarecs" @blur="bindTextAreaBlur" v-model="text"
						@confirm="subtarea"/>
					<view class="subcs" @tap="tapSubmit">发送</view>
				</view>
				<button v-else class="voicbtncs" @tap="emitadd" ref="submian">
					按住&nbsp;说话
				</button>
			</view>

			<view class="addright">
				<view class="iconfont icon-xiaolian"></view>
				<view class="iconfont icon-jiahao"></view>
			</view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				voice: true,
				ishow: false,
				text: ''
			};
		},

		computed: {
			// 语音小于10秒 都返回最小长度15%
			// 语音长度随语音秒数变化
			...mapState('m_imvido', ['vidodata'])
		},
		methods: {
			...mapActions('m_imvido', ['addactionim']),
			...mapMutations('m_imvido', ['IMVIDOACTION']),
			bindTextAreaBlur: function(e) {
				// console.log(e.detail.value)
			},
			subtarea() {
				console.log(11111111);
				if (!this.text) {
					return uni.showToast({
						title: '不能为空',
						duration: 2000,
						icon: 'error'
					});
				} else {

					this.addactionim({
						text: this.text
					});
					this.text = '';
					this.$emit('inputinformation')
				}
				// this.$emit('emiteart', this.text);
			},
			tapSubmit() {
				console.log(12123123);
				if (!this.text) {
					return uni.showToast({
						title: '不能为空',
						duration: 2000,
						icon: 'error'
					});
				} else {
					this.addactionim({
						text: this.text
					});
					this.text = '';
this.$emit('inputinformation')
				}
			},
			emitadd() {
				// #ifndef H5
				this.$emit('myvoice', this.ishow);
				// #endif
				// this.$refs.submian.innerHTML = '松开发送'
				// this.$refs.submian.style.color = 'red'
			}
		}
	};
</script>
<style lang="scss" scoped>
	.mybutm {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10rpx 0 40rpx 0;
		background-color: #fff;

		.addleft {
			// &::after {
			// 	display: block;
			// 	content: '';
			// 	height: 50px;
			// }
			width: 80rpx;
			padding: 10rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}

		.addcenter {
			position: relative;
			background-color: aliceblue;
			width: calc(100vw - 240rpx);
			display: flex;
			align-items: center;

			.textarecs {
				width: calc(100vw - 240rpx);
				height: 50rpx;
				padding-right: 80rpx;
				box-sizing: border-box;
			}

			.voicbtncs {
				font-size: 16rpx;
				width: calc(100vw - 240rpx);
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.subcs {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 60rpx;
				height: 100%;
				font-size: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #f8f8f8;
				border-radius: 10rpx;
				background: linear-gradient(to right, #3388ee, #4db9f1);
			}
		}

		.addright {
			display: flex;
			align-items: flex-end;
			justify-content: space-around;
			width: 160rpx;
		}
	}
</style>